<template>
	<view>
		<uni-popup ref="popup" title="蓝牙连接" backgroundColor="white" :safeArea="false" type="bottom"
			@change="changePopup">
			<scroll-view scroll-y="true" background-color="#fff" style="height: 800rpx;">

				<view class="bg1">
					<button class="button blue">影描机编号</button>
					<view v-for="(item,index) in bluetoothList" :key="index" class="bluetoothBox"
						v-if="bluetoothList.length>0">
						<view class="left" style="display: flex;align-items: center;">
							<view class="item_title">{{item.name}}</view>
							<view v-if="connectDeviceId === item.deviceId" style="margin-left: 20rpx; color: red;">已连接
							</view>
							<view v-else style="margin-left: 20rpx; color: red;">未连接</view>
							<!-- <view class="item_subtitle">信号强度:{{item.RSSI}}</view> -->
						</view>
						<view v-if="connectDeviceId === item.deviceId" class="connect-btn"
							style="background-color: #3c3e49" @tap="closeBLEConnection(item.deviceId)">断开</view>
						<view v-else class="connect-btn" @tap="connect(item.deviceId,item.name)">连接</view>
					</view>

					<view v-if="bluetoothList.length<=0" style="margin: 20px;">
						<view class="title600">未搜索到设备编号</view>
						<view class="p-20">请检查以下操作步骤</view>
						<view class="p-20">1.请检查手机蓝牙是否开启</view>
						<view class="p-20">2.影描机是否连接其他手机被占用中</view>
					</view>

					<view style="margin: 20rpx auto;margin-top: 40rpx;" class="btn-next" @click="getDevInfo"
						v-if="istype">
						选择WIFI投图模式</view>

					<view style="margin: 20rpx auto;margin-top: 40rpx;" class="btn-next" v-else @click="gotobluelink">
						选择蓝牙投图模式</view>

				</view>

			</scroll-view>



		</uni-popup>
	</view>
</template>

<script>
	import {
		Blue
	} from '@/utils/index.js'
	import {
		ConnectController
	} from '@/utils/controller.js'
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			istype: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			show: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.showPopup()
					} else {
						if (oldVal) {
							this.closePopup()
						}
					}
				},
				immediate: true
			}
		},
		data() {
			return {
				bluetoothList: [],
				connectDeviceId: ''
			};
		},
		methods: {
			gotobluelink() {
				uni.setStorageSync('devip', "");
				uni.setStorageSync('devid', "");
				this.closePopup()
			},
			changePopup(e) {
				if (e.show === false) {
					this.$emit('close')
				}
			},
			showPopup() {
				this.$refs.popup.open()
				Blue.start()
				this.bluetoothList = Blue.deviceList
				this.connectDeviceId = Blue.bleConnectDeviceID

				ConnectController.addConnectStateListen(data => {
					console.log('监听连接==>', JSON.stringify(data))
					if (data.deviceId) {
						this.connectDeviceId = data.deviceId
					} else {
						this.connectDeviceId = null

					}

					// this.$emit('blueState', '来自子组件的数据');
				})
				const prefix = "YM_"; //彭工的测试模块
				ConnectController.addDevicesListen(device => {
					if (device.name && device.name.startsWith(prefix)) {
						const index = this.bluetoothList.findIndex(item => item.name === device.name)
						if (index < 0) {
							this.bluetoothList.push(device)
						}
					}
				})
			},
			closePopup() {
				this.$refs.popup.close()
			},
			connect(id, name) {
				if (Blue.connectState === 200) {
					uni.showToast({
						icon: 'none',
						title: '蓝牙处于连接状态'
					})
					return
				}
				Blue.createBLEConnection(id, name)
			},
			closeBLEConnection() {
				// this.connectDeviceId = null
				Blue.closeBLEConnection()
			},
			getDevInfo() {
				uni.showLoading({
					title: "获取设备信息..."
				})
				Blue.getDeviceInfo().then(res => {
					console.log('获取设备信息:', res)
					if (res && res != "retry too") {
						setTimeout(() => {
							uni.hideLoading();
						}, 3000);
						uni.showToast({
							icon: 'none',
							title: "获取设备信息成功"
						})
						var tares = JSON.parse(res);
						this.deviceid = tares.id
						this.deviceip = tares.ip
						uni.setStorageSync('devip', this.deviceip);
						uni.setStorageSync('devid', this.deviceid);
						var devip = uni.getStorageSync('devip');
						var devid = uni.getStorageSync('devid');
						console.log(this.deviceid, this.deviceip)
						console.log(devip, devid)
						this.closePopup()
					} else {
						setTimeout(() => {
							uni.hideLoading();
						}, 3000);
						uni.showToast({
							icon: 'none',
							title: "获取设备信息失败"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.btn-next {
		background-color: #3c96f3;
		color: white;
		width: 90%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 40rpx
	}

	.title600 {
		text-align: center;
		font-size: 30px;
		font-weight: 600;
		padding-bottom: 30px;
	}

	.bg1 {
		width: 100%;
		background-color: white;
		height: 800rpx;
		padding: 20rpx;
	}

	.button {
		width: 90%;
		font-size: 16px;
		text-align: center;
		border: none;
		border-radius: 5px;
		color: white;
	}

	.bluetoothBox {
		height: 160rpx;
		margin: 20rpx;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		display: flex;
		padding: 20rpx;
		align-items: center;
	}

	.bluetoothBox .left {
		flex: 1;
	}

	.item_title {
		font-size: 30rpx;
		color: #333;
		margin: 15rpx 0;
	}

	.item_subtitle {
		font-size: 26rpx;
		color: #666;
		margin: 15rpx 0;
	}

	.connect-btn {
		width: 150rpx;
		height: 60rpx;
		background-color: #409EFF;
		color: white;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
		margin: auto 20rpx;
	}

	.blue {
		background-color: #007BFF;
	}
</style>